<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉伸盒子</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .drag_wrap{
            position: absolute;
            top: 100px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: #f2ff02;
            user-select: none;
        }
        .drag_wrap > div{
            position: absolute;
            width: 7px;
            height: 7px;
            background-color: #f00;
        }
        .leftTop{
            top: 0;
            left: 0;
            cursor: nw-resize;
        }
        .rightTop{
            top: 0;
            right: 0;
            cursor: ne-resize;
        }
        .leftBottom{
            bottom: 0;
            left: 0;
            cursor: sw-resize;
        }
        .rightBottom{
            bottom: 0;
            right: 0;
            cursor: se-resize;
        }
    </style>
</head>
<body>
    <div class="drag_wrap">
        <div class="leftTop"></div>
        <div class="rightTop"></div>
        <div class="leftBottom"></div>
        <div class="rightBottom"></div>
    </div>
    <script>
        let domDragWrap = document.querySelector('.drag_wrap'),
            domLeftTop = domDragWrap.getElementsByClassName('.leftTop')[0]
        
        domLeftTop.onmousedown = function(e){
            //鼠标按下的坐标
            let x = e.clientX,
                y = e.clientY,
                dWidth = domDragWrap.offsetWidth,/* 该容器的宽和高 */
                dHight = domDragWrap.offsetHight
        }
        /* 
            1.鼠标按下可以进行拖拽
                按下后才可以进行拖拽，交互行为结束后，鼠标抬起，清除document页面事件
            2.以左上角拖拽为例：
                鼠标在小红点按下时，直接获取容器此时的宽，高，坐标
                鼠标移动过程中，鼠标坐标直接设置成容器坐标
                计算容器坐标 与 容器初识坐标的差值，用来添加到容器的宽和高中
         */
    </script>
</body>
</html>